<template>
  <!-- 根节点 -->
  <div class="index">
    <!-- 顶部 -->
    <header class="header">
      <h1>购物车</h1>
      <button>编辑</button>
    </header>
    <!-- 商品列表 -->
    <ul class="list">
      <li v-for="(item, index) in listData" :key="index">
        <div class="list-left">
          <input type="checkbox" v-model="item.checked" />
          <div class="img" :style="{ background: item.img }"></div>
        </div>
        <div class="list-right">
          <p>{{ item.name }}</p>
          <span>{{ item.guige }}</span>
          <div class="list-r-inner">
            <p class="l-r-i-Q">{{ item.money }}</p>
            <button @click="jian(index)">-</button>
            <span class="number">{{ item.number }}</span>
            <button @click="add(index)">+</button>
          </div>
        </div>
      </li>
    </ul>
    <!-- 操作和总价 -->
    <div class="setting">
      <div>
        <input type="checkbox" v-model="checkAll" />
        <span>全选</span>
      </div>
      <div>
        <span style="color: red">合计：￥{{ sumMoney }}</span>
        <button>去结算{{ sunNumber }}</button>
      </div>
    </div>
    <!-- 底部导航栏 -->
    <ul class="foot">
      <li>首页</li>
      <li>换购区</li>
      <li>购物车</li>
      <li>我的</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Index",
  methods: {
    // 加减数量函数
    jian(index) {
      if (this.listData[index].number >= 1) {
        this.listData[index].number--;
      }
    },
    add(index) {
      this.listData[index].number++;
    },
    //计算总价
    computeSum(arr) {
      //对arr里面的价格和数量进行计算
      // console.log(arr);
      this.sumMoney = arr.reduce((a, b) => {
        return a + b.money * b.number;
      }, 0);
    },
  },
  computed: {
    checkAll: {
      //获取
      get() {
        //对listData数据里的checked属性监听，
        // 如果checked为true的个数等于listData的长度length了
        const sumlen = this.listData.length;
        //查找checked为true的个数
        const findtrue = this.listData.filter((item) => item.checked);
        // console.log(findtrue);
        const findlen = findtrue.length;
        this.sunNumber = findlen;
        //计算总价
        this.computeSum(findtrue);
        return findlen === sumlen;
      },
      // 对全选的设置
      set(value) {
        for (let i = 0; i < this.listData.length; i++) {
          this.listData[i].checked = value;
        }
      },
    },
  },
  data() {
    return {
      // 总个数
      sunNumber: 0,
      // 总价
      sumMoney: 0,
      // 全选状态
      // checkAll: false,
      // 产品列表数据
      listData: [
        {
          name: "苹果",
          guige: "60ml",
          money: 10,
          img: "red",
          checked: false,
          number: 1,
        },
        {
          name: "香蕉",
          guige: "200ml",
          money: 20,
          img: "yellow",
          checked: false,
          number: 1,
        },
        {
          name: "葡萄",
          guige: "80ml",
          money: 30,
          img: "green",
          checked: false,
          number: 1,
        },
        {
          name: "芒果",
          guige: "100ml",
          money: 40,
          img: "blue",
          checked: false,
          number: 1,
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
// 根样式
.index {
  // 顶部
  .header {
    background: #eb2e15;
    color: white;
    h1 {
      display: inline-block;
      margin-right: 400px;
    }
  }
  // 商品列表
  .list {
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .list-left {
        display: flex;
        align-items: center;
      }
      .list-right {
        .list-r-inner {
          display: flex;
          button {
            padding: 10px;
          }
          .number {
            // padding: 0 10px;
            display: inline-block;
            width: 50px;
            text-align: center;
          }
          .l-r-i-Q {
            color: red;
            margin-right: 20px;
          }
        }
      }
      .img {
        width: 100px;
        height: 100px;
        background: red;
      }
    }
  }
  // 操作和总价
  .setting {
    display: flex;
    align-content: center;
    justify-content: space-between;
  }
  // 底部
  .foot {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    justify-content: space-between;
    li {
      border: 1px solid #666;
      padding: 5px;
    }
  }
}
</style>